<template>
  <div class="app-container">
    <el-row :gutter="10" style="padding: 0 20px">
      <el-col :span="4">
        卖家积分余额: <span style="font-weight: bold; font-size: 20px">{{ balance }}</span>
      </el-col>
      <el-col :span="4">
        卖家冻结积分: <span style="font-weight: bold; font-size: 20px">{{ frozenBalance }} </span></el-col
      >
      <el-col :span="1.5">
        <el-button
          type="primary"
          v-hasPermi="['system:payCashierConfig:list:sellerPoints']"
          @click="handleRecharge()"
          plain
          size="mini"
        >
          积分充值入口
        </el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="primary" @click="handleRecharge('admin')" plain size="mini">
          积分手动充值入口admin
        </el-button>
      </el-col> -->
    </el-row>
    <el-row style="margin: 5px 0 10px 0">
      <el-radio-group v-model="radio" @change="(type) => getList(type)">
        <el-radio :label="1">积分记录</el-radio>
        <el-radio :label="2" v-hasPermi="['distribution:distributorPointsFrozenRecords:list']"> 冻结积分记录 </el-radio>
      </el-radio-group>
    </el-row>
    <div v-if="radio == 1" class="mb8">
      <!-- *************************************搜索区************************************* -->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <!-- 账单生成时间 -->
        <el-form-item :label="$t('时间选择')" prop="timeBetween">
          <el-date-picker
            @change="getList(1)"
            style="width: 350px"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            v-model="queryParams.time"
            type="datetimerange"
          >
          </el-date-picker>
        </el-form-item>
        <!-- 积分变动类型 -->
        <el-form-item :label="$t('积分变动类型')" prop="type">
          <el-select clearable v-model="queryParams.type" filterable @change="getList(1)">
            <el-option
              v-for="item in points_records_type_list"
              :label="item.dictLabel"
              :value="item.dictValue"
              :key="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList(1)">
            <!-- 搜索 -->
            {{ $t('搜索') }}
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery(1)">
            <!-- 重置 -->
            {{ $t('重置') }}
          </el-button>
        </el-form-item>
      </el-form>
      <el-row class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            v-hasPermi="['distributor:distributorPoints:export']"
            @click="handleExport"
            plain
            size="mini"
          >
            时间范围导出
          </el-button>
        </el-col>
      </el-row>
      <el-table :height="calTableHeight() - 100" v-loading="loading" ref="TableRef" :data="tableData" row-key="menuId">
        <el-table-column align="center" show-overflow-tooltip prop="type" :label="$t('积分变动类型')">
          <template slot-scope="{ row }">
            <span :style="{ color: $randomColor(row.type) }">{{ handleType(row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="alteration" :label="$t('变动积分')">
          <template slot-scope="{ row }">
            <span style="font-weight: bold">{{ row.alteration }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="alterationBefore" :label="$t('变动前持有积分')" />
        <el-table-column align="center" show-overflow-tooltip prop="alterationLater" :label="$t('变动后持有积分')" />
        <el-table-column align="center" show-overflow-tooltip prop="inOut" :label="$t('出/入')">
          <template slot-scope="{ row }">
            <span style="color: green" v-if="row.inOut == 1">{{ $t('增加') }}</span>
            <span style="color: red" v-if="row.inOut == 2">{{ $t('减少') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="createTime" :label="$t('创建时间')" />
        <el-table-column align="center" show-overflow-tooltip prop="remark" :label="$t('备注')" />
      </el-table>

      <pagination
        v-show="pageTotal > 0"
        :total="pageTotal"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList(1)"
      />
    </div>
    <div v-if="radio == 2">
      <!-- *************************************搜索区************************************* -->
      <el-form :model="queryParams2" ref="queryForm" size="small" :inline="true">
        <!-- 账单生成时间 -->
        <el-form-item :label="$t('时间选择')" prop="timeBetween">
          <el-date-picker
            @change="getList(2)"
            style="width: 350px"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            v-model="queryParams2.time"
            type="datetimerange"
          >
          </el-date-picker>
        </el-form-item>
        <!-- 积分变动类型 -->
        <el-form-item :label="$t('冻结积分变动类型')" prop="type">
          <el-select clearable v-model="queryParams2.type" filterable @change="getList(2)">
            <el-option
              v-for="item in frozen_points_records_type_list"
              :label="item.dictLabel"
              :value="item.dictValue"
              :key="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList(2)">
            <!-- 搜索 -->
            {{ $t('搜索') }}
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery(2)">
            <!-- 重置 -->
            {{ $t('重置') }}
          </el-button>
        </el-form-item>
      </el-form>
      <el-row class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            v-hasPermi="['distribution:distributorPointsFrozenRecords:export']"
            @click="handleExport"
            plain
            size="mini"
          >
            时间范围导出
          </el-button>
        </el-col>
      </el-row>
      <el-table
        :height="calTableHeight() - 100"
        v-loading="loading2"
        ref="TableRef"
        :data="tableData2"
        row-key="menuId"
      >
        <el-table-column align="center" show-overflow-tooltip prop="type" :label="$t('冻结积分变动类型')">
          <template slot-scope="{ row }">
            <span :style="{ color: $randomColor(row.type) }">{{ handleType2(row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="alteration" :label="$t('变动积分')">
          <template slot-scope="{ row }">
            <span style="font-weight: bold">{{ row.alteration }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="alterationBefore"
          :label="$t('变动前持有冻结积分')"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="alterationLater"
          :label="$t('变动后持有冻结积分')"
        />
        <el-table-column align="center" show-overflow-tooltip prop="inOut" :label="$t('出/入')">
          <template slot-scope="{ row }">
            <span style="color: green" v-if="row.inOut == 1">{{ $t('增加') }}</span>
            <span style="color: red" v-if="row.inOut == 2">{{ $t('减少') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="isSettle" :label="$t('是否结算')">
          <template slot-scope="{ row }">
            <!-- 是否结算 0: 未结算 1:已结算 -->
            <span style="color: red" v-if="row.isSettle == 0">{{ $t('未结算') }}</span>
            <span style="color: green" v-if="row.isSettle == 1">{{ $t('已结算') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="settleTime" :label="$t('结算时间')" />
        <el-table-column align="center" show-overflow-tooltip prop="remark" :label="$t('备注')" />
        <el-table-column align="center" show-overflow-tooltip prop="createTime" :label="$t('创建时间')" />
      </el-table>

      <pagination
        v-show="pageTotal2 > 0"
        :total="pageTotal2"
        :page.sync="queryParams2.pageNum"
        :limit.sync="queryParams2.pageSize"
        @pagination="getList(2)"
      />
    </div>

    <Recharge
      :type="recharge.type"
      :show.sync="recharge.show"
      :title="recharge.title"
      @getList="
        () => {
          getList(radio)
        }
      "
      :data="recharge.data"
    />
  </div>
</template>

<script>
import { list, getDistributorPoints, distributorPointsFrozenRecordsList } from '@/api/bill/sellerPoints'
import { useDict } from '@/utils/useDict'
import Recharge from './components/recharge.vue'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'Platform',
  components: {
    Recharge,
  },
  data() {
    return {
      distrId: JSON.parse(localStorage.getItem('distr') || '{}').distrId,
      balance: '',
      frozenBalance: '',
      radio: 1,
      showSearch: true,
      /**详情信息 */
      recharge: {
        /**显示详情 */
        show: false,
        type: '',
        title: '',
        data: [],
        query: {},
      },

      /**
       * 积分变动类型
       */
      points_records_type_list: [],
      /**
       * 冻结积分变动类型
       */
      frozen_points_records_type_list: [],
      tableData: [],
      tableData2: [],
      /**数据总条数 */
      pageTotal: 0,
      pageTotal2: 0,
      loading: false,
      loading2: false,
      // 查询参数
      queryParams: {
        time: [],
        pageNum: 1,
        pageSize: 10,
        type: '',
      },
      queryParams2: {
        time: [],
        pageNum: 1,
        pageSize: 10,
        type: '',
      },
    }
  },
  created() {
    this.getList()
    this.getDict()
  },

  methods: {
    getDistributorPoints() {
      getDistributorPoints().then((res) => {
        const { code, data, msg } = res
        console.log(`res ==>`, JSON.parse(JSON.stringify(res)))
        this.balance = data.balance
        this.frozenBalance = data.frozenBalance
      })
    },
    getDict() {
      useDict('points_records_type').then(({ points_records_type }) => {
        this.points_records_type_list = points_records_type
      })
      useDict('frozen_points_records_type').then(({ frozen_points_records_type }) => {
        this.frozen_points_records_type_list = frozen_points_records_type
      })
    },
    handleExport() {
      if (this.radio == 1) {
        this.export1()
      } else {
        this.export2()
      }
    },
    export1() {
      if (this.queryParams.time.length == 0) {
        return this.$message({ type: 'error', message: this.$t('请选择时间范围') })
      }
      const data = {
        ...this.queryParams,

        startTime: this.queryParams.time[0],
        endTime: this.queryParams.time[1],
      }
      delete data.time
      this.download(
        'distributor/distributorPoints/export',
        {
          ...data,
          distrId: this.distrId,
        },
        `platformBalance_${new Date().getTime()}.xlsx`,
      )
    },
    export2() {
      if (this.queryParams2.time.length == 0) {
        return this.$message({ type: 'error', message: this.$t('请选择时间范围') })
      }
      const data = {
        ...this.queryParams2,

        startTime: this.queryParams2.time[0],
        endTime: this.queryParams2.time[1],
      }
      delete data.time
      this.download(
        'distribution/distributorPointsFrozenRecords/export',
        {
          ...data,
          distrId: this.distrId,
        },
        `platformBalance_${new Date().getTime()}.xlsx`,
      )
    },
    handleType(type) {
      const index = this.points_records_type_list.findIndex((i) => i.dictValue == type)
      return this.points_records_type_list[index]?.dictLabel
    },
    handleType2(type) {
      const index = this.frozen_points_records_type_list.findIndex((i) => i.dictValue == type)
      return this.frozen_points_records_type_list[index]?.dictLabel
    },
    handleRecharge(type = '') {
      this.recharge.show = true
      this.recharge.type = type
    },

    /** 查询菜单列表 */
    getList(type = 1) {
      this.getDistributorPoints()
      if (type == 1) {
        this.list1()
      } else {
        this.list2()
      }
    },

    list1() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        startTime,
        endTime,
        distrId: this.distrId,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      this.loading = true

      list(data).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },
    list2() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams2.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams2,
        startTime,
        endTime,
        distrId: this.distrId,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      this.loading2 = true

      distributorPointsFrozenRecordsList(data).then((res) => {
        this.tableData2 = res.rows
        this.pageTotal2 = res.total
        this.loading2 = false
      })
    },

    /** 重置按钮操作 */
    resetQuery(type) {
      if (type == 1) {
        Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = ''))
        this.queryParams.pageNum = 1
        this.queryParams.pageSize = 10
        this.getList(1)
      } else {
        Object.keys(this.queryParams2).forEach((key) => (this.queryParams2[key] = ''))
        this.queryParams2.pageNum = 1
        this.queryParams2.pageSize = 10
        this.getList(2)
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
